<template>
  <div>
    <br />
    <el-form label-width="80px">
      <el-form-item label="学校名称">
        <el-input style="width: 400px" v-model="form.name"></el-input>&emsp;<el-button
          type="primary"
          @click="search"
          >搜索</el-button
        >
        <el-button type="success" @click="add">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="name" label="学校名称"></el-table-column>
      <el-table-column prop="code" label="学校标识码"></el-table-column>
      <el-table-column prop="department" label="主管部门"></el-table-column>
      <el-table-column prop="address" label="所在地"></el-table-column>
      <el-table-column prop="level" label="办学层次"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button @click="edit(scope.row)">编辑</el-button>
          <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <el-dialog v-model="dialogVisible" title="学校信息" width="30%">
      <el-form :model="dialogForm" label-width="80px">
        <el-form-item label="学校名称">
          <el-input v-model="dialogForm.name"></el-input>
        </el-form-item>
        <el-form-item label="学校标识码">
          <el-input v-model="dialogForm.code"></el-input>
        </el-form-item>
        <el-form-item label="主管部门">
          <el-input v-model="dialogForm.department"></el-input>
        </el-form-item>
        <el-form-item label="所在地">
          <el-input v-model="dialogForm.address"></el-input>
        </el-form-item>
        <el-form-item label="办学层次">
          <el-input v-model="dialogForm.level"></el-input>
        </el-form-item>
        <el-form-item label="x">
          <el-input v-model="dialogForm.x"></el-input>
        </el-form-item>
        <el-form-item label="y">
          <el-input v-model="dialogForm.y"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from "vue";
import http from "../utils/http";

const form = ref({
  name: "",
});

const list = ref([]);
const total = ref(0);
const currentPage = ref(1);
const pageSize = ref(5);

const dialogVisible = ref(false);
const dialogForm = ref({});
const editId = ref(null);

const search = async () => {
  const res = await http.get("/liststation", {
    params: {
      name: form.value.name,
      page: currentPage.value,
      limit: pageSize.value,
    },
  });
  if (res.data.code === 0) {
    list.value = res.data.data.rows;
    total.value = res.data.data.count;
  }
};

const del = async (id) => {
  const res = await http.post("/delstation", { id });
  if (res.data.code === 0) {
    search();
  }
};

const add = () => {
  dialogForm.value = {};
  editId.value = null;
  dialogVisible.value = true;
};

const edit = (row) => {
  dialogForm.value = { ...row };
  editId.value = row.id;
  dialogVisible.value = true;
};

const confirm = async () => {
  if (editId.value) {
    const res = await http.post("/editstation", {
      id: editId.value,
      ...dialogForm.value,
    });
    if (res.data.code === 0) {
      search();
      dialogVisible.value = false;
    }
  } else {
    const res = await http.post("/addstation", dialogForm.value);
    if (res.data.code === 0) {
      search();
      dialogVisible.value = false;
    }
  }
};

const handleSizeChange = (val) => {
  pageSize.value = val;
  search();
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
  search();
};

search();
</script>
